<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>背景图像技术</title>
		<style type="text/css">
		a{
			font-size:12px;
			color:#fff;
			text-decoration:none;
		}
		.btn{
			width:100px;
			height:30px;
			line-height:30px;
			text-align:center;
			display:block;
			-moz-border-radius:5px;
			background-color:#ccc;
			border:1px solid #fff;
		}
		.btn:hover{
			background-color:#ff0000;
		}
		.btn2{
			padding:5px 15px;
			display:inline-block;
			text-align:center;
			-moz-border-image:url(images/whiteButton.png) 10;
			-webkit-border-image:url(images/whiteButton.png) 10;
		}
		.btn2:hover{
			-moz-border-image:url(images/grayButton.png) 10;
			-webkit-border-image:url(images/grayButton.png) 10;
		}
		.btn2:active{
			-moz-border-image:url(images/bigButtonActive.png) 10;
			-webkit-border-image:url(images/bigButtonActive.png) 10;
		}
		</style>
	</head>
	<body>
		<a href="#" class="btn">我是链接</a>
		<hr/>
		<a href="#" class="btn2">我也是链接</a>
	</body>
</html>